/// <reference path="jquery/jquery.js" />
/// <reference path="scripts/generated/objects/category.js" />
/// <reference path="scripts/generated/objects/customercustomerdemo.js" />
/// <reference path="scripts/generated/objects/customerdemographic.js" />
/// <reference path="scripts/generated/objects/customer.js" />
/// <reference path="scripts/generated/objects/employee.js" />
/// <reference path="scripts/generated/objects/employeeterritory.js" />
/// <reference path="scripts/generated/objects/orderdetail.js" />
/// <reference path="scripts/generated/objects/order.js" />
/// <reference path="scripts/generated/objects/product.js" />
/// <reference path="scripts/generated/objects/region.js" />
/// <reference path="scripts/generated/objects/shipper.js" />
/// <reference path="scripts/generated/objects/supplier.js" />
/// <reference path="scripts/generated/objects/territory.js" />
var outerLayout, innerLayout;

$(document).ready(SetLayout);
$(document).ready(SetActions);

function SetLayout() {

	// create the OUTER LAYOUT
	outerLayout = $("body").layout(layoutSettings_Outer);

	// BIND events to hard-coded buttons in the NORTH toolbar
	//		outerLayout.addToggleBtn( "#tbarToggleNorth", "north" );
	//		outerLayout.addOpenBtn( "#tbarOpenSouth", "south" );
	//		outerLayout.addCloseBtn( "#tbarCloseSouth", "south" );
	//		outerLayout.addPinBtn( "#tbarPinWest", "west" );
	// 
	// save selector strings to vars so we don't have to repeat it
	// must prefix paneClass with "body > " to target ONLY the outerLayout panes
	var westSelector = "body > .ui-layout-west"; // outer-west pane

	// CREATE SPANs for pin-buttons - using a generic class as identifiers
	$("<span></span>").addClass("pin-button").prependTo(westSelector);
	// BIND events to pin-buttons to make them functional
	outerLayout.addPinBtn(westSelector + " .pin-button", "west");

	// CREATE SPANs for close-buttons - using unique IDs as identifiers
	$("<span></span>").attr("id", "west-closer").prependTo(westSelector);
	// BIND layout events to close-buttons to make them functional
	outerLayout.addCloseBtn("#west-closer", "west");



	/* Create the INNER LAYOUT - nested inside the 'center pane' of the outer layout
	* Inner Layout is create by createInnerLayout() function - on demand
	*
	innerLayout = $("div.pane-center").layout( layoutSettings_Inner );
	*
	*/


	// DEMO HELPER: prevent hyperlinks from reloading page when a 'base.href' is set
	$("a").each(function() {
		var path = document.location.href;
		if (path.substr(path.length - 1) == "#") path = path.substr(0, path.length - 1);
		if (this.href.substr(this.href.length - 1) == "#") this.href = path + "#";
	});

}

function SetActions() {
	$().Ribbon({ theme: 'base' });

	//INSERT TABLE HANDLERS HERE
	$('#CategoryList').click(SetupCategoryGrid);
	$('#CustomerCustomerDemoList').click(SetupCustomerCustomerDemoGrid);
	$('#CustomerDemographicList').click(SetupCustomerDemographicGrid);
	$('#CustomerList').click(SetupCustomerGrid);
	$('#EmployeeList').click(SetupEmployeeGrid);
	$('#EmployeeTerritoryList').click(SetupEmployeeTerritoryGrid);
	$('#OrderDetailList').click(SetupOrderDetailGrid);
	$('#OrderList').click(SetupOrderGrid);
	$('#ProductList').click(SetupProductGrid);
	$('#RegionList').click(SetupRegionGrid);
	$('#ShipperList').click(SetupShipperGrid);
	$('#SupplierList').click(SetupSupplierGrid);
	$('#TerritoryList').click(SetupTerritoryGrid);
}


/*
*#######################
* OUTER LAYOUT SETTINGS
*#######################
*
* This configuration illustrates how extensively the layout can be customized
* ALL SETTINGS ARE OPTIONAL - and there are more available than shown below
*
* These settings are set in 'sub-key format' - ALL data must be in a nested data-structures
* All default settings (applied to all panes) go inside the defaults:{} key
* Pane-specific settings go inside their keys: north:{}, south:{}, center:{}, etc
*/
var layoutSettings_Outer = {
	name: "outerLayout" // NO FUNCTIONAL USE, but could be used by custom code to 'identify' a layout
	// options.defaults apply to ALL PANES - but overridden by pane-specific settings
	, defaults: {
		size: "auto"
		, minSize: 50
		, paneClass: "pane" 		// default = 'ui-layout-pane'
		, resizerClass: "resizer"	// default = 'ui-layout-resizer'
		, togglerClass: "toggler"	// default = 'ui-layout-toggler'
		, buttonClass: "button"	// default = 'ui-layout-button'
		, contentSelector: ".content"	// inner div to auto-size so only it scrolls, not the entire pane!
		, contentIgnoreSelector: "span"		// 'paneSelector' for content to 'ignore' when measuring room for content
		, togglerLength_open: 35			// WIDTH of toggler on north/south edges - HEIGHT on east/west edges
		, togglerLength_closed: 35			// "100%" OR -1 = full height
		, hideTogglerOnSlide: true		// hide the toggler when pane is 'slid open'
		, togglerTip_open: "Close This Pane"
		, togglerTip_closed: "Open This Pane"
		, resizerTip: "Resize This Pane"
		//	effect defaults - overridden on some panes
		, fxName: "slide"		// none, slide, drop, scale
		, fxSpeed_open: 750
		, fxSpeed_close: 1500
		, fxSettings_open: { easing: "easeInQuint" }
		, fxSettings_close: { easing: "easeOutQuint" }
	}
	, north: {
		spacing_open: 0			// cosmetic spacing
		, size: 122
		, togglerLength_open: 0			// HIDE the toggler button
		, togglerLength_closed: -1			// "100%" OR -1 = full width of pane
		, resizable: false
		, slidable: false
		//	override default effect
		, fxName: "none"
	}
	, south: {
		maxSize: 200
		, spacing_closed: 0			// HIDE resizer & toggler when 'closed'
		, slidable: false		// REFERENCE - cannot slide if spacing_closed = 0
		, initClosed: true
		//	CALLBACK TESTING...
		, onhide_start: function() { return confirm("START South pane hide \n\n onhide_start callback \n\n Allow pane to hide?"); }
		, onhide_end: function() { alert("END South pane hide \n\n onhide_end callback"); }
		, onshow_start: function() { return confirm("START South pane show \n\n onshow_start callback \n\n Allow pane to show?"); }
		, onshow_end: function() { alert("END South pane show \n\n onshow_end callback"); }
		, onopen_start: function() { return confirm("START South pane open \n\n onopen_start callback \n\n Allow pane to open?"); }
		, onopen_end: function() { alert("END South pane open \n\n onopen_end callback"); }
		, onclose_start: function() { return confirm("START South pane close \n\n onclose_start callback \n\n Allow pane to close?"); }
		, onclose_end: function() { alert("END South pane close \n\n onclose_end callback"); }
		//,	onresize_start:			function () { return confirm("START South pane resize \n\n onresize_start callback \n\n Allow pane to be resized?)"); }
		, onresize_end: function() { alert("END South pane resize \n\n onresize_end callback \n\n NOTE: onresize_start event was skipped."); }
	}
	, west: {
		size: 250
		, spacing_closed: 21			// wider space when closed
		, togglerLength_closed: 21			// make toggler 'square' - 21x21
		, togglerAlign_closed: "top"		// align to top of resizer
		, togglerLength_open: 0			// NONE - using custom togglers INSIDE west-pane
		, togglerTip_open: "Close West Pane"
		, togglerTip_closed: "Open West Pane"
		, resizerTip_open: "Resize West Pane"
		, slideTrigger_open: "click" 	// default
		, initClosed: true
		, fxName: "drop"
		, fxSpeed: "normal"
		, fxSettings: { easing: ""} // nullify default easing
	}
	, east: {
		size: 250
		, spacing_closed: 21			// wider space when closed
		, togglerLength_closed: 21			// make toggler 'square' - 21x21
		, togglerAlign_closed: "top"		// align to top of resizer
		, togglerLength_open: 0 			// NONE - using custom togglers INSIDE east-pane
		, togglerTip_open: "Close East Pane"
		, togglerTip_closed: "Open East Pane"
		, resizerTip_open: "Resize East Pane"
		, slideTrigger_open: "mouseover"
		, initClosed: true
		, fxName: "drop"
		, fxSpeed: "normal"
		, fxSettings: { easing: ""} // nullify default easing
	}
	, center: {
		onresize: ResizeMe	// resize INNER LAYOUT when center pane resizes
		, minWidth: 200
		, minHeight: 200
	}
};

function ResizeMe(testobj, centerLayout) {
	try {
		var thegrid = jQuery("#grid");
		thegrid.setGridWidth(centerLayout[0].clientWidth - 30);
		thegrid.setGridHeight(outerLayout.panes.center.innerHeight() - 105);

	}
	catch (ex) {
		alert(ex);
	}
}

/// <reference path="scripts/generated/objects/category.js" />
function SetupCategoryGrid() {
	var grid = new CategoryGrid();
	grid.SetupGrid('#content');
}

/// <reference path="scripts/generated/objects/customercustomerdemo.js" />
function SetupCustomerCustomerDemoGrid() {
	var grid = new CustomerCustomerDemoGrid();
	grid.SetupGrid('#content');
}

/// <reference path="scripts/generated/objects/customerdemographic.js" />
function SetupCustomerDemographicGrid() {
	var grid = new CustomerDemographicGrid();
	grid.SetupGrid('#content');
}

/// <reference path="scripts/generated/objects/customer.js" />
function SetupCustomerGrid() {
	var grid = new CustomerGrid();
	grid.SetupGrid('#content');
}

/// <reference path="scripts/generated/objects/employee.js" />
function SetupEmployeeGrid() {
	var grid = new EmployeeGrid();
	grid.SetupGrid('#content');
}

/// <reference path="scripts/generated/objects/employeeterritory.js" />
function SetupEmployeeTerritoryGrid() {
	var grid = new EmployeeTerritoryGrid();
	grid.SetupGrid('#content');
}

/// <reference path="scripts/generated/objects/orderdetail.js" />
function SetupOrderDetailGrid() {
	var grid = new OrderDetailGrid();
	grid.SetupGrid('#content');
}

/// <reference path="scripts/generated/objects/order.js" />
function SetupOrderGrid() {
	var grid = new OrderGrid();
	grid.SetupGrid('#content');
}

/// <reference path="scripts/generated/objects/product.js" />
function SetupProductGrid() {
	var grid = new ProductGrid();
	grid.SetupGrid('#content');
}

/// <reference path="scripts/generated/objects/region.js" />
function SetupRegionGrid() {
	var grid = new RegionGrid();
	grid.SetupGrid('#content');
}

/// <reference path="scripts/generated/objects/shipper.js" />
function SetupShipperGrid() {
	var grid = new ShipperGrid();
	grid.SetupGrid('#content');
}

/// <reference path="scripts/generated/objects/supplier.js" />
function SetupSupplierGrid() {
	var grid = new SupplierGrid();
	grid.SetupGrid('#content');
}

/// <reference path="scripts/generated/objects/territory.js" />
function SetupTerritoryGrid() {
	var grid = new TerritoryGrid();
	grid.SetupGrid('#content');
}

